<!DOCTYPE html>


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>简单业务接入管理</title>
    <link rel="stylesheet" href="public/layui/css/layui.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/blue.css">
    <link rel="stylesheet" href="css/nprogress.css">
    <style>
        .info-box {
            height: 85px;
            background-color: white;
            background-color: #ecf0f5;
        }

        .info-box .info-box-icon {
            border-top-left-radius: 2px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 2px;
            display: block;
            float: left;
            height: 85px;
            width: 85px;
            text-align: center;
            font-size: 45px;
            line-height: 85px;
            background: rgba(0, 0, 0, 0.2);
        }

        .info-box .info-box-content {
            padding: 10px;
            margin-left: 85px;
        }

        .info-box .info-box-content .info-box-text {
            display: block;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-transform: uppercase;
        }

        .info-box .info-box-content .info-box-a {
            display: block;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            margin: 0 auto;
            width: 60px;
        }

        .info-box .info-box-content .info-box-number {
            display: block;
            font-weight: bold;
            font-size: 18px;
        }

        .major {
            font-weight: 10px;
            color: #01AAED;
        }

        .main {
            margin-top: 25px;
        }

        .main .layui-row {
            margin: 10px 0;
        }
    </style>
</head>
<body class="layui-layout-body kit-theme">

<div class="layui-layout layui-layout-admin  kit-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">简单业务接入管理</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left kit-nav" style="left:200px">
            <i
                    class="layui-icon" style="line-height:50px;color:#888;font-size:20px">&#xe705;</i>
        </ul>
        <ul class="layui-nav layui-layout-right kit-nav">
            <li class="layui-nav-item">
                <a href="javascript:;" style="color:#333;">
                    欢迎, demo <span
                        class="layui-nav-more"></span></a>
                <dl class="layui-nav-child layui-anim layui-anim-upbit">
                    <dd><a href="javascript:;" data-url="/tplay/public/admin/admin/personal/id/16.shtml"
                           data-icon="fa-asterisk" data-title="个人信息" kit-target="" data-id="1"><span><i
                            class="fa fa-cog"></i> 基本资料</span></a></dd>
                    <dd><a href="javascript:;" data-url="/tplay/public/admin/admin/editpassword.shtml"
                           data-icon="fa-edit" data-title="修改密码" kit-target="" data-id="2"><span><i
                            class="fa fa-edit"></i> 修改密码</span></a></dd>
                    <dd><a href="javascript:;" id="logout"><span><i class="fa fa-sign-out"
                                                                    aria-hidden="true"></i> 退了</span></a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-this"><a href="javascript:;" id="copyright" style="color:#333;"><i
                    class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="ripple show"
                                                                          style="width: 50px; height: 50px; top: 0px; left: -24.4219px;"></span></a>
            </li>
        </ul>
        <div id="loading-line"></div>
    </div>

    <div class="layui-side layui-bg-black kit-side">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item" data-id="ability"><a href="javascript:;"><i
                        class="layui-icon">&#xe857;</i><i class="sac-text">&nbsp;业务能力管理</i></a></li>
                <li class="layui-nav-item" data-id="user"><a href="javascript:;"><i
                        class="layui-icon">&#xe612;</i><i class="sac-text">&nbsp;接入管理</i></a></li>
                <li class="layui-nav-item"><a href="javascript:;"><i
                        class="layui-icon">&#xe715;</i><i class="sac-text">&nbsp;服务治理</i></a>

                    <dl class="layui-nav-child" style="background: #f2f2f2 !important;">
                        <dd><a href="javascript:;" data-id="service">微服务管理</a></dd>
                        <dd><a href="javascript:;" data-id="machine">机器管理</a></dd>
                        <dd><a href="javascript:;" data-id="repo">Jar应用管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" data-id="log"><a href="javascript:;"><i
                        class="layui-icon">&#xe60e;</i><i class="sac-text">&nbsp;日志查看</i></a></li>
                <li class="layui-nav-item" data-id="dashboard"><a href="javascript:;"><i
                        class="layui-icon">&#xe62c;</i><i class="sac-text">&nbsp;监控仪表盘</i></a></li>
                <li class="layui-nav-item"><a href="javascript:;"><i
                        class="layui-icon">&#xe715;</i><i class="sac-text">&nbsp;用户管理</i></a>
                    <dl class="layui-nav-child" style="background: #f2f2f2 !important;">
                        <dd><a href="javascript:;" data-id="group">群组</a></dd>
                        <dd><a href="javascript:;" data-id="staff">用户</a></dd>
                        <dd><a href="javascript:;" data-id="permission">权限</a></dd>
                    </dl>
                </li>
            </ul>


        </div>
        <div class="layui-side-footer" style="padding-left:12px">
            <!-- 底部固定区域 -->
            © ESAP &nbsp; - &nbsp;简单业务接入平台
        </div>
    </div>

    <div class="layui-body" id="container" style="padding:0 2px;">
        <div class="layui-tab layui-tab-card kit-tab" lay-allowClose="true" lay-filter="kitTab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="-1" data-url="/public/admin/main/index"><i
                        class="layui-icon layui-icon-home "></i><i class="layui-tab-close" style="display:none">ဆ</i>
                </li>
            </ul>
            <div class="layui-tab-content" id="layui-tab-content">

            </div>
        </div>
    </div>

</div>

<script src="public/layui/layui.all.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/loader.js"></script>
<script>
    //JavaScript代码区域


    layui.use('element', function () {
        var element = layui.element;
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    , content: '内容' + (Math.random() * 1000 | 0)
                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下

                })
            }
            , tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            , tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };
        var group = {};

        $("#layui-tab-content").html('<div class="layui-tab-item layui-show"><iframe src="home.html" name="ifames" style="height: ' + ($("#container")[0].clientHeight - 46) + 'px;"></iframe></div>')

        $('.layui-nav-item').on('click', function (e) {
            var othis = $(this)[0];
            var id = othis.getAttribute("data-id"), title;
            if (!id) {
                othis = e.target;
                id = othis.getAttribute("data-id");
                title = othis.innerText;
            } else {
                title = othis.querySelector(".sac-text").innerText;
            }

            if (!id) return;
            oka.loading.animLine();

            if (!group[id]) {
                element.tabAdd('kitTab', {
                    title: title
                    ,
                    content: '<iframe src="' + id + '.html" name="ifames" style="height: ' + ($("#container")[0].clientHeight - 46) + 'px;"></iframe>'
                    ,
                    id: id //实际使用一般是规定好的id，这里以时间戳模拟下
                });
                group[id] = 1;
            }

            othis = null;
            element.tabChange('kitTab', id);
        });
        element.on('tabDelete(kitTab)', function (data) {
            delete group[(this.parentNode.getAttribute("lay-id"))];
        });

        var isOpen = false;
        $("#kit-tab-tool").on('click', function () {
            if (isOpen) {

            }
            $("#closeTabPanel")[0].style.display = isOpen ? 'none' : 'block';
            isOpen = !isOpen;
        });

        $("#logout").on('click', function () {
            location.href = "login.html";
        });


    });
</script>
</body>
</html>
      